<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>长方体</title>
    <style>
      .container {
        margin: 100px auto;
        perspective: 1000px; /* 视距 - 站在离屏幕 1000px的位置来看里面的立方体*/
      }

      .container:hover .mybox {
        /*  transform-origin: 50% 50% -100px; 旋转的中心点 */
        transform: rotateX(-180deg);
      }

      /* 创建的立方体盒子 长 400px   高 300px   厚 200px */
      .mybox {
        width: 400px;
        height: 300px;
        transform-origin: 50% 50% -100px; /* 旋转的中心点 */
        /* border: 2px solid blue; */
        margin: 150px auto;
        position: relative; /* 相对定位*/
        transform-style: preserve-3d;
        transition: transform 3s linear;
        /* animation: rotate 10s linear infinite; */
      }

      /* @keyframes rotate {
          0% {
          transform: rotateX(0deg) rotateY(0deg);
          }
          100% {
          transform: rotateX(-360deg) rotateY(-360deg);
          }
      } */

      .mybox .face {
        position: absolute;
        top: 0;
        left: 0;
      }

      /* 正面和背面 */
      .mybox .before,
      .mybox .after {
        width: 400px;
        height: 300px;
      }

      .mybox .before {
        background-color: rgb(139, 45, 226, 0.5);
      }

      .mybox .after {
        background-color: rgb(125, 248, 1, 0.5);
      }

      /* 顶面和底面 */
      .mybox .top,
      .mybox .bottom {
        width: 400px;
        height: 200px;
      }

      .mybox .top {
        background-color: rgb(130, 200, 228, 0.5);
      }

      .mybox .bottom {
        background-color: rgb(253, 99, 72, 0.5);
      }

      /* 左边和右边 */
      .mybox .left,
      .mybox .right {
        width: 200px;
        height: 300px;
      }
      .mybox .left {
        background-color: rgb(241, 224, 71, 0.5);
      }
      .mybox .right {
        background-color: rgb(4, 4, 245, 0.5);
      }

      /*背面*/
      .mybox .after {
        transform: translateZ(-200px);
      }

      /* 顶面 */
      .mybox .top {
        transform-origin: bottom;
        /* 位移 */
        transform: translateY(-100%) rotateX(90deg);
      }

      /* 底面 */
      .mybox .bottom {
        transform-origin: top;
        transform: translateY(300px) rotateX(-90deg);
      }

      /* 左面 */
      .mybox .left {
        transform-origin: right;
        transform: translateX(-100%) rotateY(-90deg);
      }

      /* 右面 */
      .mybox .right {
        transform-origin: left;
        transform: translateX(400px) rotateY(90deg);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <!-- 创建立方体的盒子 -->
      <div class="mybox">
        <div class="face before">正面</div>
        <div class="face after">背面</div>
        <div class="face top">top - 顶面</div>
        <div class="face bottom">bottom - 底面</div>
        <div class="face left">左边</div>
        <div class="face right">右边</div>
      </div>
    </div>
  </body>
</html>
